<template>
  <el-dialog
    :title="title"
    :visible.sync="innerVisible"
    width="800px"
    @close="handleCancel"
  >
    <div class="header">
      <div class="header-user">
        <span>{{ currentData.createUserName }}</span>
        <span>{{ currentData.createTime }}</span>
      </div>
      <div class="header-content">
        <div class="header-content-text">
          <div class="content">
            {{ currentData.sendContent }}
          </div>
          <div class="send">
            交办对象: {{ currentData.sendUserName }}
          </div>
        </div>
        <div
          class="header-content-image"
          v-if="currentData.filePath"
        >
          <el-image
            :preview-src-list="[
              `${STATIC_FILE_URL}${currentData.filePath}`
            ]"
            :src="`${STATIC_FILE_URL}${currentData.filePath}`"
          ></el-image>
        </div>
      </div>
      <div v-if="current === 'view' || current === 'reply'">
        <div class="title">办理情况：</div>
        <div class="reply">
          <span class="reply-user">{{
            currentData.sendUserName
          }}</span>
          <span class="reply-time">{{
            currentData.repeatTime
          }}</span>
          <span class="reply-status">{{
            currentData.status
          }}</span>
        </div>
        <div>{{ currentData.repeatContent }}</div>
      </div>
      <div v-if="current === 'reply'">
        <div class="title">回复内容：</div>
        <div class="reply">
          <el-input
            type="textarea"
            :rows="5"
            v-model="replyContent"
          ></el-input>
        </div>
      </div>
      <div v-if="current === 'edit'">
        <div class="title">交办对象：</div>
        <el-checkbox-group
          v-model="sendUser"
          :disabled="isDetail"
          class="checkbox-group"
        >
          <el-checkbox
            v-for="item in userOptions"
            :key="item"
            :label="item"
            :value="item"
            class="checkbox-item"
          >
            {{ item }}
          </el-checkbox>
        </el-checkbox-group>
        <div>{{ currentData.repeatContent }}</div>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="current === 'reply'"
    >
      <el-button type="primary" @click="handleConfirm"
        >回复</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { STATIC_FILE_URL } from '@/api/config.js'
import { userQuery } from '@/api/user'
export default {
  name: 'ProgressDialog',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: '填写信息'
    },
    isDetail: {
      type: Boolean
    },
    currentData: {
      type: Object
    },
    current: {
      type: String
    }
  },
  data() {
    return {
      innerVisible: false,
      userOptions: [],
      sendUser: '',
      replyContent: ''
    }
  },
  computed: {
    STATIC_FILE_URL() {
      return STATIC_FILE_URL
    }
  },
  watch: {
    visible(val) {
      this.innerVisible = val
    },
    innerVisible(val) {
      this.$emit('update:visible', val)
    },
    currentData(val) {
      this.form = val
    },
    current(val) {
      this.replyContent = ''
      if (val === 'edit') {
        this.getUserList()
      }
    }
  },
  methods: {
    getUserList() {
      const params = {
        pageIndex: 1,
        pageSize: 99
      }
      userQuery(params).then((res) => {
        if (res.success) {
          this.userOptions = res.data.list
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    handleConfirm() {
      this.$emit('confirm', this.replyContent)
      this.handleCancel()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/dialog.scss';
.header {
  &-user {
    span:nth-of-type(2) {
      color: gray;
      margin-left: 20px;
    }
  }

  &-content {
    display: flex;
    background: rgb(245, 247, 250);
    margin-top: 10px;
    padding: 10px;

    &-text {
      width: 500px;

      .content {
        max-height: 200px;
        overflow: auto;
        margin-top: 10px;
      }

      .send {
        margin-top: 20px;
      }
    }

    &-image {
      flex: 1;
      width: 200px;
      margin-top: 10px;
    }
  }

  .title {
    font-weight: bold;
    font-size: 16px;
    margin: 10px 0;
  }

  .reply {
    display: flex;
    align-items: center;
    background: rgb(245, 247, 250);
    padding: 10px;

    &-user {
      margin-right: 10px;
    }

    &-time {
      color: gray;
      margin-right: 10px;
    }

    &-status {
      background: rgba(121, 214, 242, 1);
      border-radius: 5%;
      color: white;
      padding: 10px;
    }
  }
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-item {
  width: 25%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
